<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>线下服务</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_408825_r4tzzggojjfhto6r.css"/>
		<link rel="stylesheet" type="text/css" href="css/xxPublic.css"/>
		<link rel="stylesheet" type="text/css" href="css/xxMall.css"/>
	</head>
	<body>
		
		<div class="offlineBox">
			<div class="offline-left">
				<ul id="offlineLists">
					<!--<li class="active"><span>维修</span></li>-->
				</ul>
			</div>
			<div class="offline-right">
				<ul class="offlineConlists" id="offlineConLists">
					
				</ul>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/jquery.tmpl.min.js"></script>
		<script src="js/network.js"></script>
		
		<script src="js/footer.js"></script>
		<!--分类-->
		<script id="offlineTmpl" type="text/x-jquery-tmpl">
			<li id="${id}"><span>${name}</span></li>
		</script>
		
		<!--线下服务列表-->
		<script id="offlineConTmpl" type="text/x-jquery-tmpl">
			<li>
				<a href="offline/offlineDetail.html?goodsid=${id}">
					<div class="leftbox">
						<img src="${imgUrl}"/>
					</div>
					<div class="rightbox">
						<div class="">
							<span>${name}</span>
							<p>专业服务更可靠</p>
						</div>
						<div class="">
							<!--<em>&yen;50/小时</em>-->
							<em>&yen;${price}/小时</em>
							<dl>
								<dd>69045条评论</dd>
								<dd>98%好评</dd>
							</dl>
						</div>
					</div>
				</a>
			</li>
		</script>
		<script>
			$(function(){
				var winH = $(window).height()-4;
				var footH = $('.footerBox').outerHeight();
				$('#offlineLists').height(winH-footH);
				
				//左边菜单选中效果
				$('.offline-left ul').click(function(even){
					even.stopPropagation();
				})
				
				
				var page=1;
				
				ltNetwork.get('offlineService/types','',function(res){
					console.log(res);
					var res = JSON.parse(res);			//字符串转换成json格式
					var data = res.data;
					$('#offlineTmpl').tmpl(data).appendTo('#offlineLists');
					$('#offlineLists li').eq(0).addClass('active');
					var _id = $('#offlineLists li').eq(0).attr('id');
					getOfflineGoods(_id,page);	//最初显示的第一个数据
					$('#offlineLists').on('click','li',function(){
						$(this).addClass('active').siblings().removeClass('active');
						$('#offlineConLists').html('');
						_id = $(this).attr('id');
						page = 1;
						getOfflineGoods(_id,page);
					});
				},function(msg){
					console.log(msg);
				});
				
				
			});
			
				function getOfflineGoods(typeid,page){
					var offlinegoodParam = {
						typeId:typeid
					}
					ltNetwork.get('offlineService/page/'+page+'/pageSize/10',offlinegoodParam,function(res){
						console.log(res);
						var res = JSON.parse(res);			//字符串转换成json格式
						var data = res.data;
						$('#offlineConTmpl').tmpl(data).appendTo('#offlineConLists');
					},function(msg){
						console.log(msg);
					});
				}
		</script>
	</body>
</html>
